layui.use([ 'form', 'layer', 'table', 'laydate' ], function() {
    var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : top.layer,
        $ = layui.jquery,
        laydate = layui.laydate,
        table = layui.table;

    table.render({
        elem : '#_leftTable'
        ,url : __ctxPath + '/aj/AjJsManager.do?method=list'
        ,autoSort: false                //禁用前端自动排序。注意：该参数为 layui 2.4.4 新增
        ,cellMinWidth : 120 			//全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth
        ,page : true 					//开启分页（默认：false）
        ,height : "full-75" 			//设定容器高度
        ,limits : [ 10, 15, 20, 25 ] 	//每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。优先级低于 page 参数中的 limits 参数。
        ,limit : 15 					//每页显示的条数（默认：10）。值务必对应 limits 参数的选项。优先级低于 page 参数中的 limit 参数。
        ,toolbar: '#_leftTableToolbar'		//开启工具栏（动态列素筛选、导出、打印）
        ,loading: true 					//开启加载效果（默认false）
        ,id : "_leftTable"
        ,request: {
            pageName: 'page', //页码的参数名称，默认：page
            limitName: 'rows' //每页数据量的参数名，默认：limit
        }
        ,where: { //每次请求时的请求参数，可以在监听table排序事件中覆盖了请求参数
            _orderFields: "isOnline, name"
            ,_orderRules: "desc, asc"
        }
        ,cols : [[
            {
                type:'radio'
            },{
                field : "lid"
                ,title : "主键"
                ,hide : true
            },{
                field : "name"
                ,title : "脚本名称"
                ,align : "left"
                ,sort : true
                ,width : 120
            },{
                field : "packageName"
                ,title : "打包包名"
                ,align : "left"
                ,sort : true
                ,width : 260
            },{
                field : "remark"
                ,title : "脚本说明"
                ,align : "left"
            },{
                field : "isOnline"
                ,title : "是否上线"
                ,align : "left"
                ,sort : true
                ,templet: '#isOnlineTpl'
                //,templet : vo => vo.isOnline == 1 ? `<span style="color:green">是</span>` : `<span style="color:red">否</span>`
                ,width : 120
            },{
                title : "操作"
                ,templet : '#leftTableBar'
                ,fixed : "right"
                ,align : "left"
                ,width : 120
            }
        ]]
        ,done : function(res, curr, count){

        }
    });

    //监听行单击事件
    table.on('row(_leftTable)', function(obj){
        obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');//选中行样式
        obj.tr.find('input[lay-type="layTableRadio"]').prop("checked",true);
        form.render('radio');

        let data = obj.data;
        table.reload("_rightTable", {
            where: {
                jmLid: data.lid
            }
        });
    });

    //监听是否上线
    form.on('switch(isOnline)', function(obj){
        let lid = $(this).attr("lid");
        let isOnline = obj.elem.checked ? IS_YES : IS_NO;

        $.post("/aj/AjJsManager.do?method=update", {lid: lid, isOnline: isOnline}, function(response){
            if(response.code == RESPONSE_SUCCESS){
                reloadTable("_leftTable");
                reloadTable("_rightTable");
            }else{
                layer.msg(response.msg);;
            }
        });
    });

    //监听table行内编辑按钮
    table.on('tool(_leftTable)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var layEvent = obj.event,
            data = obj.data;

        if (layEvent === 'edit') { //编辑
            toPage("/aj/AjJsManager.do?method=toEditOrDetail", {lid: data.lid, pageType: TO_EDIT, pageUrl: "aj/ajJsManager/jsp/update.jsp", width:'35%', height:'60%'});
        } else if (layEvent === 'del') { //删除
            if(data.isOnline == 1){
                return layer.confirm("不能删除正在上线的脚本！请先将脚本下线之后在做删除");
            }

            layer.confirm('确定删除该记录？', {icon : 3, title : '提示信息'}, function(index) {
                $.post("/aj/AjJsManager.do?method=delete", {lid: data.lid}, function(response){
                    layer.close(index);
                    if(response.code == RESPONSE_SUCCESS){
                        reloadTable("_leftTable");
                        reloadTable("_rightTable");
                    }else{
                        return layer.msg(response.msg);;
                    }
                });
            });
        }
        //#结束
    });

    table.render({
        elem : '#_rightTable'
        ,url : '/aj/AjJs.do?method=listByJmLid'
        ,autoSort: false                //禁用前端自动排序。注意：该参数为 layui 2.4.4 新增
        ,cellMinWidth : 120 			//全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth
        ,page : false 					//开启分页（默认：false）
        ,height : "full-75" 			//设定容器高度
        ,toolbar: '#_rightTableToolbar'		//开启工具栏（动态列素筛选、导出、打印）
        ,loading: true 					//开启加载效果（默认false）
        ,id : "_rightTable"
        ,request: {
            pageName: 'page' //页码的参数名称，默认：page
            ,limitName: 'rows' //每页数据量的参数名，默认：limit
        }
        ,where: { //初始化时的请求参数
            _orderFields: "version" //排序字段
            ,_orderRules: "desc" //排序方式
        }
        ,cols : [[
            {
                type : "checkbox"
                ,fixed : "left"
                ,width : 50
            },{
                field : "fileName"
                ,title : "脚本文件"
                ,align : "left"
                ,templet : vo => {
                    let fileList = vo.fileMap.jsFile;
                    if(fileList && fileList.length > 0){
                        return `<a href="/${fileList[0].url}" target="_blank">${fileList[0].name}</a>`;
                    }
                }
            },{
                field : "price"
                ,title : "脚本单价（元）"
                ,align : "left"
                ,sort : true
            },{
                field : "version"
                ,title : "版本号"
                ,align : "left"
                ,sort : true
            },{
                field : "remark"
                ,title : "版本说明"
                ,align : "left"
            },{
                title : "操作"
                ,templet : '#rightTableBar'
                ,fixed : "right"
                ,align : "left"
            }
        ]]
        ,done : function(res, curr, count){
            $(".toAddAjJsBtn").click(function(){ //由于刷新table会重新渲染按钮，所以得重新添加监听器
                let lid = $("[lay-id=_leftTable] .layui-table-click [data-field=lid] div").html(); //获取勾选id，layui提供的checkStatus方法获取不了，改用这种方式
                if(!lid) {
                    layer.msg("请勾选左边的主项");
                    return;
                }
                toPage("/aj/AjJs.do?method=toAdd", {jmLid:lid, pageUrl: "aj/ajJsManager/jsp/addJs.jsp", width:'80%', height:'80%'});
            });

            $("#deleteBatchAjJsBtn").on("click", function() { //由于刷新table会重新渲染按钮，所以得重新添加监听器
                layer.confirm('确定删除所选的'+table.checkStatus('_rightTable').data.length+'该记录？', {icon : 3, title : '提示信息'}, function(index) {
                    var lids = getLidsOfSelections('_rightTable');
                    $.post("/aj/AjJs.do?method=delete", {lids: lids}, function(response){
                        if(response.code == RESPONSE_SUCCESS){
                            reloadTable("_rightTable");
                        }else{
                            return layer.msg(response.msg);
                        }
                    });
                });
            });
        }
    });

    //监听table行内编辑按钮
    table.on('tool(_rightTable)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var layEvent = obj.event,
            data = obj.data;

        if (layEvent === 'edit') { //编辑
            toPage("/aj/AjJs.do?method=toEditOrDetail", {lid: data.lid, pageType: TO_EDIT, pageUrl: "aj/ajJsManager/jsp/updateJs.jsp", width:'80%', height:'80%'});
        }
    });

    //监听排序事件
    table.on('sort(_rightTable)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        //防止别名
        table.reload('_rightTable', {
            initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
            ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                _orderFields: obj.field //排序字段
                ,_orderRules: obj.type //排序方式
            }
        });
    });

});